import ProTable from '@ant-design/pro-table';
import {useState} from 'react';
import {defaultPagination, paginationTool} from '@/utils/util';
import {useMount, useRequest} from 'ahooks';

import {getResult} from '@/services/ant-design-pro/attribute';
import { editUsersReg, findByPageList} from '@/services/ant-design-pro/users';
import {ProFormSelect} from "@ant-design/pro-form";
import {findByAgentBySelectList} from "../../services/ant-design-pro/agent";
import FormModalBtn from "../../components/FormModalBtn";

const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    search: false,
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    valueType: 'avatar',
    search: false,
  },

  {
    title: '用户姓名',
    dataIndex: 'nickname',

  },
  {
    title: '账号',
    dataIndex: 'userName',

  },
  {
    title: '手机号',
    dataIndex: 'phone',

  },
  {
    title: '管理上级',
    dataIndex: 'parentName',
    search: false,
  },
  {
    title: '授权等级',
    dataIndex: 'agentName',
    search: false,
  },
  {
    title: '时间',
    dataIndex: 'createDate',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '状态',
    dataIndex: 'state',
    valueType: 'select',
    valueEnum: await getResult ( 'backsatgeloginstate' ),
    search: false
  },
];
//
const cloneTbale = () => {
  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const {
    run: fetchByPageList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByPageList, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( () => {
    fetchByPageList ();
  } );

  return (
    <ProTable
      onDataSourceChange={(d) => {
        console.log ( 'onDataSourceChange', d );
      }}
      onLoad={(d) => {
        // 数据加载完操作
        console.log ( 'onDataSourceChange', d );
      }}
      dataSource={dataList?.data?.list}
      loading={loading}
      pagination={paginationTool ( pagination, dataList?.data?.total, (data1: API.Pagination) => {
        setPagination ( data1 );

        fetchByPageList ( {...data1} );
      } )}
      search={{
        defaultCollapsed: false,
        labelWidth: 'auto',
      }}
      onSubmit={(params) => {
        fetchByPageList ( params );
        console.log ( 'onSubmit', params );
      }}
      cardBordered={true}
      columns={columns}
      toolBarRender={()=>[  <FormModalBtn width={1100}  title="资料修改" btnText="资料修改" columns={[
          {
            title: "id", dataIndex: 'id',
            key: 'id',
            width: 'md',
            readonly: true,
            formItemProps: {
              hidden: true
            }

          }, {
        title: "用户基础资料",
        dataIndex: 'users',
        key: 'users',
        valueType: "group",
        columns: [ {
          title: "用户姓名", dataIndex: 'nickname',
          key: 'nickname',
          width: 'sm'

        }, {
          title: "手机号码", dataIndex: 'phone',
          key: 'phone',
          width: 'sm'

        }, {
          title: "账号", dataIndex: 'userName',
          key: 'userName',
          width: 'sm'

        }, {
          title: "登录密码", dataIndex: 'password',
          key: 'password',
          width: 'sm',
          valueType: "password"

        }]

      }, {
        title: "认证资料",
        dataIndex: 'users',
        key: 'users',
        valueType: "group",
        columns: [
          {
            title: "认证姓名", dataIndex: 'name',
            key: 'name',
            width: 'sm'

          }, {
            title: "身份证号", dataIndex: 'idCard',
            key: 'idCard',
            width: 'sm'

          }, {
            title: "微信号", dataIndex: 'wechat',
            key: 'wechat',
            width: 'sm'

          }, {
            title: "联系地址", dataIndex: 'address',
            key: 'address',
            width: 'sm'

          }, {
            title: "银行名称", dataIndex: 'bankName',
            key: 'bankName',
            width: 'sm'

          }, {
            title: "银行卡号", dataIndex: 'bankCard',
            key: 'bankCard',
            width: 'sm'

          }, {
            title: "银行地址", dataIndex: 'bankAddress',
            key: 'bankAddress',
            width: 'sm'

          }]
      }, {
        title: "用户授权信息",
        dataIndex: 'agent',
        key: 'agent',
        valueType: "group",
        columns: [
          {
            title: "代理等级", dataIndex: 'agentId',
            key: 'agentId',
            width: 'sm',
//request:()=>{return findByAgentBySelectList()}
            renderFormItem: () => <ProFormSelect debounceTime={300} request={async () => {
              return await findByAgentBySelectList ();
            }}/>
          }, {
            title: "管理上级", dataIndex: 'parentUser',
            key: 'parentUser',
            width: 'sm'

          }]
      }]} request={editUsersReg}/>]}
    ></ProTable>
  );
};

export default cloneTbale;
